<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">

      <el-form-item label="持证人名称">
        <el-input v-model="queryParams.holderName" clearable></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>



    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增持证人</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="AttenceStaList" >
      <el-table-column label="持证人姓名" align="center" prop="holderName" :show-overflow-tooltip="true" />
      <el-table-column label="持证人性别" align="center" prop="holderSex" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
              <el-tag v-if="scope.row.holderSex==1" >男</el-tag>
              <el-tag v-if="scope.row.holderSex==2" >女</el-tag>
          </template>
      </el-table-column>
      <el-table-column label="持证人身份证" align="center" prop="holderIdcard" :show-overflow-tooltip="true" />
      <el-table-column label="发证日期" align="center" prop="issuedCartDate" :show-overflow-tooltip="true" />
      <el-table-column label="证件到期日期" align="center" prop="validTerm" :show-overflow-tooltip="true" />
      <el-table-column label="体检状态" align="center" prop="physicalExamStatus" :show-overflow-tooltip="true">
          <template slot-scope="scope">
              <el-tag v-if="scope.row.physicalExamStatus==1" type="success">合格</el-tag>
              <el-tag v-if="scope.row.physicalExamStatus==0" type="info">不合格</el-tag>
          </template>
      </el-table-column>
      <el-table-column label="卫培状态" align="center" prop="healthTrainedStatus" :show-overflow-tooltip="true">
          <template slot-scope="scope">
              <el-tag v-if="scope.row.healthTrainedStatus==1" type="success">合格</el-tag>
              <el-tag v-if="scope.row.healthTrainedStatus==0" type="info">不合格</el-tag>
          </template>
      </el-table-column>
      <el-table-column label="健康证图片" align="center" prop="cartImgPath" :show-overflow-tooltip="true">
          
          <template slot-scope="scope">
              <el-image 
                style="width: 60px; height: 60px"
                :src="getImgPath(scope.row.cartImgPath)" 
                :preview-src-list="[getImgPath(scope.row.cartImgPath)]">
            </el-image>
          </template>
      </el-table-column>
      <el-table-column label="操作" align="center" >
        <template slot-scope="scope">
            
            <el-tooltip class="item" effect="dark" content="修改" placement="top" >
                <el-button 
                        size="mini"
                        circle type="warning"
                        icon="el-icon-edit"
                        @click="editSupplier(scope.row)"
                />
            </el-tooltip>  
            <el-tooltip class="item" effect="dark" content="删除" placement="top" >
                <el-button 
                        size="mini"
                        circle type="danger"
                        icon="el-icon-delete"
                        @click="deleteSupplier(scope.row)"
                />
            </el-tooltip>  
        </template>
      </el-table-column>
    </el-table>


    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <el-dialog title="编辑持证人" :visible="outDialogVisible" width="55%" :before-close="cancel" v-loading="healthLoading"
            element-loading-text="识别中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.2)">
        <el-form :model="formData" ref="formData" label-width="140px" :rules="rules">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="持证人姓名" prop="holderName">
                        <el-input v-model="formData.holderName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="健康证编号" >
                        <el-input v-model="formData.healthCartNo"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="持证人身份证">
                        <el-input v-model="formData.holderIdcard"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                     <el-form-item label="持证人性别" >
                        
                        <el-radio v-model="formData.holderSex" label="1">男</el-radio>
                        <el-radio v-model="formData.holderSex" label="2">女</el-radio>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="持证人年龄" >
                        <el-input v-model="formData.holderAge"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="发证日期" prop="issuedCartDate">
                        <el-date-picker style="width: 275px;"
                            v-model="formData.issuedCartDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="体检状态">
                        <el-radio v-model="formData.physicalExamStatus" label="1">合格</el-radio>
                        <el-radio v-model="formData.physicalExamStatus" label="0" >不合格</el-radio>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="卫培状态">
                        <el-radio v-model="formData.healthTrainedStatus" label="1">合格</el-radio>
                        <el-radio v-model="formData.healthTrainedStatus" label="0" checked>不合格</el-radio>
                        <el-button v-if="fileList.length>0" size="small" type="success" plain @click="getAutoContent">提交识别</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="有效期">
                        <el-date-picker style="width: 275px;"
                            v-model="formData.validTerm"
                            type="date"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="健康证图片">
                        <el-upload
                            
                            class="upload-demo"
                            :action="uploadFile"
                            :headers="headers"
                            :on-success="handleSuccess"
                            :on-remove="handleRemove"
                            :before-upload="handleBefore"
                            :on-exceed="handleExceed"
                            :limit="1"
                            :file-list="fileList">
                            <el-button size="small" type="primary" plain>点击上传</el-button>
                            
                            <div slot="tip" class="el-upload__tip">只能上传图片文件，且不超过1M</div>
                        </el-upload>

                    </el-form-item>
                </el-col>
            </el-row>
            
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button  type="primary" @click="submitSupplier">提交</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>

    



  </div>
</template>



<script>
  import { getHealthCartPageList, addOrUpdateHealthCartInfo,deleteHealthCartById,autoRecognitionPhoto } from "@/api/canteen/healthCert";
  import { getToken } from '@/utils/auth'

  export default {
    name: "healthcert",
    computed:{
        headers(){
        return {
            //'Content-Type': 'multipart/form-data',
            Authorization: "Bearer " + getToken()
        }
        }
    },
    data(){
      return{
        uploadFile:process.env.VUE_APP_BASE_API + "/common/file/uploadFile",
        // 遮罩层
        loading: true,
        goodsLoading:true,
        outDialogVisible:false,
        detailLoading:false,
        addGoodsDialogVisible:false,
        goodsListDialogVisible:false,
        healthLoading:false,
        // 总条数
        total: 0,
        AttenceStaList: [],
        goodsList:[],
        detailList:[],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        queryGoodsParams:{
          pageNum: 1,
          pageSize: 10
        },
        formData:{
            physicalExamStatus:'0',
            healthTrainedStatus:'0',
            holderSex:"1",
        },
        goodsFormData:{
            supplierId:undefined
        },
        fileList:[],
        rules:{
            holderName:[{ required: true, message: '请输入供应商名称', trigger: 'blur' }],
            holderIdcard:[{ required: true, message: '请输入供应商电话', trigger: 'blur' }],
            issuedCartDate:[{ required: true, message: '请输入供应商别名', trigger: 'blur' }]
        }
        
      }
    },
    components:{
      // bargraph
    },
    created() {
        this.getList();
    },
    methods: {

      /** 查询任务量列表 */
      getList() {
        this.loading = true;
        getHealthCartPageList(this.queryParams).then(response => {
            this.AttenceStaList = response.data.records;
            this.total = response.data.total;
            this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.outDialogVisible =false
        this.formData={}
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      resetForm(){
          this.formData={
            physicalExamStatus:'0',
            healthTrainedStatus:'0',
            holderSex:"1",
        }
      },
      handleAdd(){
        this.outDialogVisible = true
        this.resetForm()
        this.fileList=[]
      },
      submitSupplier(){
          console.log(this.fileList)
          if(this.fileList.length==0){
              this.$message({ message: '请上传健康证照片', type: 'warning' });
              return
          }
          this.formData.cartImgPath = this.fileList[0].url;
          this.$refs['formData'].validate((valid)=>{
              if(valid){
                  addOrUpdateHealthCartInfo(this.formData).then(resp=>{
                    this.$message({  message: '提交成功', type: 'success'});
                    this.getList()
                    this.outDialogVisible=false
                  })
              }
          })
      },
      deleteSupplier(row){
          this.$confirm('健康证信息将被删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
            deleteHealthCartById(row).then(resp=>{
                this.$message({ type: 'success', message: '删除成功!' });
                this.getList()
            })
            
        })
      },
      editSupplier(row){
          this.outDialogVisible=true
          this.formData = row
          this.fileList=[{
              name:row.cartImgPath.substr(row.cartImgPath.indexOf("/")),
              url:row.cartImgPath
          }]
      },
      handleSuccess(response,file, fileList){
          this.fileList=[{
            name:file.name,
            url:file.response.data  
          }]
          console.log('success',file)
          console.log('success',fileList)
      },
      handleRemove(file, fileList){
          this.fileList=[]
          console.log('remove',file)
          console.log('remove',fileList)
      },
      handleBefore(file){
        console.log('before',file)
        const maxSize = 1024*1024
        if(file.size>maxSize){
            this.$message({ message: '上传文件不能大于1M', type: 'warning' });
            return false
        }
        if(file.type.indexOf("image")<0){
            this.$message({ message: '请上传图片文件', type: 'warning' });
            return false
        }
        return true
      },
      handleExceed(files, fileList){
          this.$message({ message: '只能上传一张照片，想更换请删除已经有的照片', type: 'warning' });
      },
      getAutoContent(){
        const _this = this
        _this.healthLoading = true
        autoRecognitionPhoto({fileName:this.fileList[0].url}).then(resp=>{
            _this.healthLoading = false
            if(!resp.data.holderName){
                this.$message({ message: '没有识别到照片中的可用信息', type: 'warning' });
                return
            }
            _this.formData = resp.data
        })
      }
    }
  }
</script>
